<template>
  <el-card class="nav-card" shadow="hover" style="margin-bottom: 15px;">
    
    <div class="nav-buttons">
      <el-button 
        class="nav-title"
        type="primary" 
        plain 
        size="large" 
        @click="navigateToproduct">
        返回产品
      </el-button>
      <el-button 
        type="primary" 
        plain 
        size="large" 
        @click="navigateToEvent">
        事件管理
      </el-button>
      <el-button 
        type="primary" 
        plain 
        size="large" 
        @click="navigateToIrrigation">
        灌溉事件
      </el-button>
      <el-button 
        type="primary" 
        plain 
        size="large" 
        @click="navigateToPesticide">
        喷药事件
      </el-button>
      <el-button 
        type="primary" 
        plain 
        size="large" 
        @click="navigateToFertilizer">
        施肥事件
      </el-button>
      <el-button 
        type="primary" 
        plain 
        size="large" 
        @click="navigateToOtherEvent">
        其他事件
      </el-button>
    </div>
  </el-card>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const testid = route.query.cropId

/** 导航方法 - 跳转到事件管理 */
function navigateToEvent() {
  router.push('/farmerall/event')
  console.log('跳转到事件管理')
}

/** 导航方法 - 跳转到灌溉管理 */  
function navigateToIrrigation() {
  router.push('/farmerall/irrgatcrop')
  console.log('跳转到灌溉管理')
}

/** 导航方法 - 跳转到农药管理 */
function navigateToPesticide() {
  router.push('/farmerall/pestCrop')
  console.log('跳转到农药管理')
}

/** 导航方法 - 跳转到肥料管理 */
function navigateToFertilizer() {
  router.push('/farmerall/fertcrop')
  console.log('跳转到肥料管理')
}

 /** 导航方法 - 跳转到产品 */
 function navigateToproduct() {
  router.push('/farmerall/product')
  console.log('跳转到产品')
}

/** 导航方法 - 跳转到其他事件 */
function navigateToOtherEvent() {
  router.push('/farmerall/otherEvent')
  console.log('跳转到其他事件')
}
</script>

<style scoped>
.nav-card {
  border-radius: 8px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.nav-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.nav-buttons .el-button {
  min-width: 120px;
  transition: all 0.3s ease;
}

.nav-buttons .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-title {
  margin-right: auto;
}
</style>